<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .time-box {
            width: 350px;
            height: 50px;
            margin: 50px auto;
            border: 1px dashed #000;
            line-height: 50px;
            text-align: center;
            font-size: 20px
        }

        .time-box span {
            padding-left: 10px;
            color: lightcoral;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <label>截止日期<input type="text" value="2029/7/26 15:37:00"></label>
    <div class="time-box">
        距离抢购还剩<span>天-- : -- : --</span>
    </div>
    <script>
        let targetTimeInput = document.querySelector('input')
        let timeBox = document.querySelector('.time-box')
        let timeSpan = timeBox.querySelector('span')
        let autoTimer = null
        let _serverTimer = null

        // 从服务器获取当前时间 异步获取
        let queryTime = function () {
            if (_serverTimer) {
                // 自己手动累加一秒
                _serverTimer = new Date(_serverTimer.getTime() + 1000)
                return _serverTimer
            }
            return new Promise(resolve => {
                // ajax异步请求 第一次向服务器发送请求。把获取的结果存到全局变量中。
                let xhr = new XMLHttpRequest()
                xhr.open('GET', '1.json', true)
                xhr.onreadystatechange = () => {
                    if (!/^(2|3)\d{2}$/.test(xhr.status)) return
                    if (xhr.readyState == 2) {
                        _serverTimer = new Date(xhr.getResponseHeader('date'))
                        resolve(_serverTimer)
                    }
                }
                xhr.send(null)
            })


        }

        // 计算倒计时
        let computedTime = function () {
            // 计算相隔毫秒差
            let promise = queryTime()
            promise instanceof Promise?promise.then(serverTime=>fn(serverTime)):fn(promise)

            function fn(serverTime) {
                let targetTime = targetTimeInput.value.replace(/-/g, '/')
                let diffTime = new Date(targetTime) - serverTime
                if (diffTime <= 0) {
                    clearInterval(autoTimer)
                    return timeSpan.innerHTML = '-- : -- : --'
                }
                // 计算天 时分秒 
                let day = Math.floor(diffTime / 1000 / 3600 / 24)
                let hour = Math.floor((diffTime - day * 1000 * 3600 * 24) / 1000 / 3600)
                let minute = Math.floor((diffTime - day * 24 * 3600 * 1000 - hour * 1000 * 3600) / 1000 / 60)
                let second = Math.floor((diffTime - day * 24 * 3600 * 1000 - hour * 1000 * 3600 - minute * 1000 * 60) / 1000);
                // 不足两位数字补0 并且数组结构给旧值重新赋值
                [day, hour, minute, second] = [day, hour, minute, second].map(String).map(element => element.padStart(2, '0'))
                timeSpan.innerHTML = `${day}天 ${hour}:${minute}:${second}`
            }
        }
        // 开始就执行
        computedTime()
        autoTimer = setInterval(computedTime, 1000)




    </script>
</body>

</html>